<%--
  Created by IntelliJ IDEA.
  User: sofwin
  Date: 2021/9/22
  Time: 11:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath()+"/";%>
<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>Title</title>
    <link href="hplus-master/css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
    <link href="hplus-master/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" />
    <link href="hplus-master/css/animate.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="js/plugins/ztree/css/zTreeStyle/zTreeStyle.css"/>
</head>
<style>
    header{
        height: 60px;
        box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        border-radius: 6px;
        margin: 10px 10px;
        background-color: white;
        line-height: 60px;
        padding-left: 20px;
    }
    body{
        background-color: #f3f3f4;
    }
    #container{
        box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        border-radius: 6px;
        margin: 10px 10px;
        background-color: white;
        height: 80%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .a{
        box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        border-radius: 6px;
        background-color: white;
        height: 100%;
        margin-top: 10px;
    }
</style>
<body>

<div class="container-fluid" style="margin-left: 10px;">
    <div class="row">
        <div class="col-md-2 a">
           <div class="ibox float-e-margins">
            <div class="ibox-title">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-8">
                <h5>组织架构</h5>
                        </div>
                        <div class="col-md-4">
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
                        </div>
                    </div>
            </div>
            </div>
            <div class="ibox-content ztree" id="tree" >
            </div>
        </div>
        </div>
        <div class="col-md-10">

            <header>
                <form class="form-inline" id="queryForm">
                    <input type="hidden"  class="form-control" style="width: 0px;" id="deptId" name="deptId"/>
                    <div class="form-group">
                        <label for="exampleInputName2">用户名</label>
                        <input type="text" class="form-control" name="loginName" id="exampleInputName2" placeholder="请输入用户名模糊查询">
                    </div>
                    <div class="form-group">
                        <label for="mobile">手机号</label>
                        <input type="email" class="form-control" name="mobile" id="mobile" placeholder="请输入手机号精确查询">
                    </div>
                    <div class="form-group">
                        <label for="status">状态</label>
                        <select class="form-control" id="status" name="status">
                            <option value="-1">--全部--</option>
                            <option value="0">启用</option>
                            <option value="1">停用</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary query" onclick="$.refresh();"><i class="fa fa-search"></i>&nbsp;查询</button>
                    <button type="button" class="btn btn-warning resetButton"><i class="fa fa-recycle"></i>&nbsp;重置</button>
                </form>

            </header>
            <div id="container">
                <div id="toolbar">
                    <button type="button" class="btn btn-info add" onclick="$.operator.openWin('新增用户信息','user/toEdit')" ><i class="fa fa-plus"></i>新增</button>
                    <!-- Indicates caution should be taken with this action -->
                    <button type="button" class="btn btn-warning edit" id="edit" disabled><i class="fa fa-edit"></i> 编辑</button>
                    <!-- Indicates a dangerous or potentially negative action -->
                    <button type="button" class="btn btn-danger deletes" id="deletes" disabled><i class="fa fa-trash-o"></i> 删除</button>
                </div>
                <table id="table"></table>
            </div>

        </div>
    </div>
</div>

<!-- 全局js -->
<script src="hplus-master/js/jquery.min.js?v=2.1.4"></script>
<script src="hplus-master/js/plugins/layer/layer.min.js"></script>
<script src="hplus-master/js/bootstrap.min.js?v=3.3.7"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>
<script src="js/plugins/ztree/js/jquery.ztree.core.js"></script>
<script src="js/sofwin.js"></script>

</body>
<script>

    let treeObject;
    let settings={
        data:{
            simpleData:{
                // 使用简单类型的数据
                enable: true,
                idKey:'deptId',
                pIdKey:'parentId'
            },
            key:{
                name:'deptName'
            }
        },
        callback:{
            onClick:function(event,treeId,treeNode,clickFlag){
                let deptId = treeNode.deptId;
                $("#deptId").val(deptId);
                refresh();
            }
        }
    };
    let treeNodes;

    let options={
        height:400,
        url:'user/data',
        columns:[
            {
                checkbox:true
            },{
                field: 'loginName',
                sortable:true,
                title: '登录名'
            }, {
                field: 'realName',
                title: '姓名'
            }, {
                field: 'userSex',
                title: '性别',
                formatter:function (value) {
                    if(value==0) return '<span class="bg-primary">男</span>';
                    if(value==1) return '<span class="bg-success">女</span>';

                }
            },{
                field:'userBirthday',
                title:'出生日期'
            },{
                field:'userIdcard',
                title:'身份证'
            },{
                field:'mobile',
                title:'手机'
            },{
                title:'操作',
                width:'80px',
                align:'center',
                formatter:function(value,row,index){
                    let userId = row.userId;
                    return '<a  href="javascript:void(0);" title="編輯" onclick="$.operator.openWin(\'编辑用户信息\',\'user/toEdit?userId='+userId+'\');"><i class="fa fa-edit"></i></a>&nbsp;&nbsp;'+'<a  href="javascript:void(0)" onclick="deleteById('+userId+');" title="刪除"><i class="fa fa-trash-o"></i></a>';
                }
            }]
    };
    $.initTable(options);


    function deleteById(userId){
        layer.confirm('确认删除当前数据吗?', {icon: 3, title:'提示'}, function(index){
           $.modal.delete_('user/deletes?ids='+userId);
        });
    }


    $(function(){
        $.modal.post('dept/data',{},function(ret){
            treeNodes = ret.data;
            treeObject = $.fn.zTree.init($("#tree"),settings,treeNodes);
            treeObject.expandAll(true);
        });
        // 工具栏上的编辑
        $(".edit").click(function(){
            let data = $("#table").bootstrapTable('getSelections');
            if(data.length!=1){
                layer.msg('请选择需要修改的记录');
                return;
            }
            let userId = data[0].userId;
            $.operator.openWin('编辑用户信息','user/toEdit?userId='+userId)
        });
        $(".deletes").click(function () {
            let data = $("#table").bootstrapTable('getSelections');
            if(data.length==0){
                layer.msg('请选择需要删除的数据');
                return;
            }
            layer.confirm("确定需要删除"+data.length+"条数据吗？",function(){
                let param="?1=1";
                for(let i=0;i<data.length;i++){
                    param+="&ids="+data[i].userId;
                }
              $.modal.delete_('user/deletes'+param);
            });
        });

        $(".resetButton").click(function(){
            $("#queryForm")[0].reset();
            $("#deptId").val(-1);
        })
    })
    function close(){
        $.refresh();
        layer.close(index);
    }
    function refresh(){
        $.refresh();
    }
</script>

</html>
